<template>
  <BasicModal
    v-bind="config"
    :title="currTitle"
    v-model:visible="visible"
    wrapClassName="loginSelectModal"
  >
    <a-form ref="formRef" v-bind="layout" :colon="false" class="loginSelectForm">
      <a-form-item v-if="isMultiTenant" :validate-status="validate_status">
        <!--label内容-->
        <template #label>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>您隶属于多租户，请选择当前所属租户</span>
            </template>
            <a-avatar style="background-color: #87d068" :size="30"> 租户 </a-avatar>
          </a-tooltip>
        </template>
        <!--部门下拉内容-->
        <a-select
          v-model:value="tenantSelected"
          placeholder="请选择登录部门"
          :class="{ 'valid-error': validate_status == 'error' }"
        >
          <template #suffixIcon>
            <Icon icon="ant-design:gold-outline" />
          </template>
          <template v-for="tenant in tenantList" :key="tenant.id">
            <a-select-option :value="tenant.id">{{ tenant.name }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item v-if="isMultiDepart" :validate-status="validate_status1">
        <!--label内容-->
        <template #label>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>您隶属于多部门，请选择当前所在部门</span>
            </template>
            <a-avatar style="background-color: rgb(104, 208, 203)" :size="30">
              部门
            </a-avatar>
          </a-tooltip>
        </template>
        <!--部门下拉内容-->
        <a-select
          v-model:value="departSelected"
          placeholder="请选择登录部门"
          :class="{ 'valid-error': validate_status1 == 'error' }"
        >
          <template #suffixIcon>
            <Icon icon="ant-design:gold-outline" />
          </template>
          <template v-for="depart in departList" :key="depart.orgCode">
            <a-select-option :value="depart.orgCode">{{
              depart.departName
            }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button @click="handleSubmit" type="primary">确认</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, watch, unref, defineExpose } from "vue";
import { Avatar } from "ant-design-vue";
import { BasicModal } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { useUserStore } from "/@/store/modules/user";

const userStore = useUserStore();
const { createMessage, notification } = useMessage();
const props = defineProps({
  title: { type: String, default: "部门选择" },
  closable: { type: Boolean, default: false },
  username: { type: String, default: "" },
});

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};

const config = {
  maskClosable: false,
  closable: false,
  canFullscreen: false,
  width: "500px",
  minHeight: 20,
  maxHeight: 20,
};
const currTitle = ref("");

const isMultiTenant = ref(false);
const currentTenantName = ref("");
const tenantSelected = ref();
const tenantList = ref([]);
const validate_status = ref("");

const isMultiDepart = ref(false);
const currentDepartName = ref("");
const departSelected = ref("");
const departList = ref([]);
const validate_status1 = ref("");
//弹窗显隐
const visible = ref(false);
/**
 * 弹窗打开前处理
 */
async function show() {
  //加载部门
  await loadDepartList();
  //加载租户
  await loadTenantList();
  //标题配置
  if (unref(isMultiTenant) && unref(isMultiDepart)) {
    currTitle.value = "切换租户和部门";
  } else if (unref(isMultiTenant)) {
    currTitle.value =
      unref(currentTenantName) && unref(currentTenantName).length > 0
        ? `租户切换（当前租户 :${unref(currentTenantName)}）`
        : props.title;
  } else if (unref(isMultiDepart)) {
    currTitle.value =
      unref(currentDepartName) && unref(currentDepartName).length > 0
        ? `部门切换（当前部门 :${unref(currentDepartName)}）`
        : props.title;
  }
  //model显隐
  if (unref(isMultiTenant) || unref(isMultiDepart)) {
    visible.value = true;
  }
}
/**
 *加载部门信息
 */
async function loadDepartList() {}
/**
 *加载租户信息
 */
async function loadTenantList() {}

/**
 * 提交数据
 */
async function handleSubmit() {
  if (unref(isMultiTenant) && unref(tenantSelected) == null) {
    validate_status.value = "error";
    return false;
  }
  if (unref(isMultiDepart) && !unref(departSelected)) {
    validate_status1.value = "error";
    return false;
  }
  departResolve()
    .then(() => {
      if (unref(isMultiTenant)) {
        userStore.setTenant(unref(tenantSelected));
      }
      createMessage.success("切换成功");

      //切换租户后要刷新首页
      window.location.reload();
    })
    .catch((e) => {
      console.log("登录选择出现问题", e);
    })
    .finally(() => {
      if (unref(isMultiTenant)) {
        userStore.setTenant(unref(tenantSelected));
      }
      close();
    });
}
/**
 *切换选择部门
 */
function departResolve() {}
/**
 * 请求失败处理
 */
function requestFailed(err) {
  notification.error({
    message: "登录失败",
    description:
      ((err.response || {}).data || {}).message ||
      err.message ||
      "请求出现错误，请稍后再试",
    duration: 4,
  });
}
/**
 * 关闭model
 */
function close() {
  departClear();
}

/**
 *初始化数据
 */
function departClear() {
  currTitle.value = "";

  isMultiTenant.value = false;
  currentTenantName.value = "";
  tenantSelected.value = "";
  tenantList.value = [];
  validate_status.value = "";

  isMultiDepart.value = false;
  currentDepartName.value = "";
  departSelected.value = "";
  departList.value = [];
  validate_status1.value = "";

  visible.value = false;
}

/**
 * 监听username
 */
watch(
  () => props.username,
  (value) => {
    value && loadDepartList();
  }
);

defineExpose({
  show,
});
</script>
<style lang="less" scoped>
.loginSelectForm {
  margin-bottom: -20px;
}

.loginSelectModal {
  top: 20px;
}

.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>
